<template>
  <div>
    <Search></Search>
    <!-- <GoodsListNav></GoodsListNav> -->
    <div class="container">
      <div class="bread-crumb">
        <Breadcrumb>
          <BreadcrumbItem to="/home">
            <Icon type="ios-home-outline"></Icon>首页
          </BreadcrumbItem>
          <BreadcrumbItem>
            <Icon type="ios-home-outline"></Icon>全部商品
          </BreadcrumbItem>
          <BreadcrumbItem to="/goodsList?sreachData=">
            <Icon type="bag"></Icon>
            {{searchItem}}
          </BreadcrumbItem>
        </Breadcrumb>
      </div>
      <!-- 商品标签导航 -->
      <!-- <GoodsClassNav></GoodsClassNav> -->
      <!-- 商品展示容器 -->
      <div class="goods-box">
        <!-- 侧边广告栏开始 -->
        <div class="as-box">
          <div class="item-as-title">
            <span>商品精选</span>
            <span>广告</span>
          </div>
          <!-- 渲染 -->
          <div class="item-as" v-for="(item,index) in adgoodlist" :key="index">
            <div class="item-as-img">
              <router-link :to="'/gooddetail/'+item.bookid">
                  <img :src="item.bookImg"  style="width:100%;height:100%;"/>
                </router-link>
            </div>
            <div class="item-as-price">
              <span>
                <Icon type="logo-yen text-danger"></Icon>
                <span class="seckill-price text-danger">{{item.price}}</span>
              </span>
            </div>
            <div class="item-as-intro">
              <span>{{item.desc}}</span>
            </div>
            <div class="item-as-selled">
              已有
              <span>{{item.price}}</span>人评价
            </div>
          </div>
        </div>
        <!-- 侧边广告栏结束 -->
        <!-- 右侧所有商品 -->
        <div class="goods-list-box">
          <div class="goods-list-tool">
            <!-- 按条件排序 -->
            <ul>
              <li v-for="(item,index) in goodsTool" :key="index" @click="orderBy(item.en, index)">
                <span :class="{ 'goods-list-tool-active': isAction[index]}">
                  {{item.title}}
                  <Icon :type="icon[index]"></Icon>
                </span>
              </li>
            </ul>
          </div>
          <div class="goods-list">
            <div class="goods-show-info" v-for="(item, index) in allgoodlist" :key="index">
              <p class="goods-show-img">
                <router-link :to="'/gooddetail/'+item.bookid">
                  <img :src="item.bookImg" />
                </router-link>
              </p>
              <div>
                <span class="seckill-bookname">{{item.bookname}}</span>
              </div>
              <div class="goods-show-price">
                <span>      
                  <!-- <Icon type="logo-yen text-danger"></Icon> -->
                  <span class="seckill-author">作者:{{item.author}}</span>
                </span>
              </div>
              <!-- <div class="goods-show-detail">
                <span>{{item.oldprice}}</span>
              </div> -->
              <div class="goods-show-num">
                已有
                <span>{{item.price}}</span>人购买
              </div>
              <div class="goods-show-seller">
                <span>￥{{item.price}}</span>
                <span>￥{{item.oldprice}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="goods-page">
        <Page :total="100" show-sizer></Page>
      </div>
    </div>
    <Spin size="large" fix v-if="isLoading"></Spin>
  </div>
</template>

<script>
import Search from "@/components/Search";
// import GoodsListNav from '@/components/nav/GoodsListNav';
// import GoodsClassNav from '@/components/nav/GoodsClassNav';
import store from "@/vuex/store";
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
export default {
  name: "GoodsList",
  beforeRouteEnter(to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data() {
    return {
      queryInfo:{
         pageSize:7
      },
      adgoodlist:[],
      allgoodlist: [],
      searchItem: "",
      isAction: [true, false, false],
      icon: ["arrow-up-a", "arrow-down-a", "arrow-down-a"],
      goodsTool: [
        { title: "综合", en: "sale" },
        { title: "评论数", en: "remarks" },
        { title: "价格", en: "price" }
      ]
    };
  },
  computed: {
    //  拿到vuex数据渲染
    ...mapState(["asItems", "isLoading"]),
    ...mapGetters(["orderGoodsList"])
  },
  methods: {
    ...mapActions(["loadGoodsList"]),
    ...mapMutations(["SET_GOODS_ORDER_BY"]),
    orderBy(data, index) {
      console.log(data);
      this.icon = ["arrow-down-a", "arrow-down-a", "arrow-down-a"];
      this.isAction = [false, false, false];
      this.isAction[index] = true;
      this.icon[index] = "arrow-up-a";
      this.SET_GOODS_ORDER_BY(data);
    },
    async getAllGoods() {
      const { data: res } = await this.$axios.get(
        "http://localhost:8080/api/admin/goodList"
      );
      console.log(res.data);
      this.allgoodlist = res.data;
    },
    async getAdGoods() {
      const { data: res } = await this.$axios.get(
        "http://localhost:8080/api/admin/goodList",{
          params:this.queryInfo
        }
      );
      console.log(res.data);
      this.adgoodlist = res.data;
    }
  },
  created() {
    this.loadGoodsList();
    this.getAllGoods();
    this.getAdGoods()
  },
  mounted() {
    this.searchItem = this.$route.query.sreachData;
  },
  components: {
    Search
    // GoodsListNav,
    // GoodsClassNav
  },
  store
};
</script>

<style scoped>
.container {
  margin: 15px auto;
  width: 93%;
  min-width: 1000px;
}
.text-danger {
  color: #a94442;
}
.seckill-bookname{
   font-size: 20px;
   color: black;
}
.seckill-author{
  font-size: 10px;
   color: gray;
}
.seckill-price {
  margin-right: 5px;
  font-size: 25px;
  /* font-weight: bold; */
}
.goods-show-seller span:nth-child(1){
      font-size: 20px;
      color: #e4393c;
}
.goods-show-seller span:nth-child(2){
      font-size: 10px;
      color: gray;
      text-decoration: line-through;
}
.goods-box {
  display: flex;
}
/* ---------------侧边广告栏开始------------------- */
.as-box {
  width: 200px;
  border: 1px solid #ccc;
}
.item-as-title {
  width: 100%;
  height: 36px;
  color: #b1191a;
  line-height: 36px;
  font-size: 18px;
}
.item-as-title span:first-child {
  margin-left: 20px;
}
.item-as-title span:last-child {
  float: right;
  margin-right: 15px;
  font-size: 10px;
  color: #ccc;
}
.item-as {
  width: 160px;
  margin: 18px auto;
}
.item-as-img {
  width: 160px;
  height: 160px;
  margin: 0px auto;
}
.item-as-price span {
  font-size: 18px;
}
.item-as-intro {
  margin-top: 5px;
  font-size: 12px;
}
.item-as-selled {
  margin-top: 5px;
  font-size: 12px;
}
.item-as-selled span {
  color: #005aa0;
}
/* ---------------侧边广告栏结束------------------- */

/* ---------------商品栏开始------------------- */
.goods-list-box {
  margin-left: 15px;
  width: calc(100% - 215px);
}
.goods-list-tool {
  width: 100%;
  height: 38px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.goods-list-tool ul {
  padding-left: 15px;
  list-style: none;
}
.goods-list-tool li {
  cursor: pointer;
  float: left;
}
.goods-list-tool span {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-left: none;
  line-height: 36px;
  background-color: #fff;
}
.goods-list-tool span:hover {
  border: 1px solid #e4393c;
}
.goods-list-tool i:hover {
  color: #e4393c;
}
.goods-list-tool-active {
  color: #fff;
  border-left: 1px solid #ccc;
  background-color: #e4393c !important;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods-show-info {
  width: 240px;
  padding: 10px;
  margin: 15px 0px;
  border: 1px solid #fff;
  cursor: pointer;
}
.goods-show-info div{
     margin-left:10px; 
     margin-top: 5px;
}
/* 实现鼠标悬挂时显示边框和阴影 */
.goods-show-info:hover {
  border: 1px solid #ccc;
  box-shadow: 0px 0px 15px #ccc;
}
.goods-show-price {
  margin-top: 6px;
}
.goods-show-detail {
  font-size: 12px;
  margin: 6px 0px;
}
.goods-show-num {
  font-size: 12px;
  margin-bottom: 6px;
  color: #009688;
}
.goods-show-num span {
  color: #005aa0;
  font-weight: bold;
}
/* .goods-show-seller {
  font-size: 12px;
  color: #e4393c;
} */
.goods-page {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.goods-show-img {
  width: 220px;
  height: 220px;
}
.goods-show-img img {
  width: 100%;
  height: 100%;
}
/* ---------------商品栏结束------------------- */
</style>
